<!DOCTYPE html>
<html>

<head>
  <meta charset="UTF-8">
  <title>Document</title>
</head>

<body>
  <div id="clockBox"></div>

  <script>
    let clockBox = document.getElementById('clockBox');

    /* 
     * addZero: 不足十位补零
     *    @params
     *        val需要处理的值
     *    @return
     *        处理后的结果
     * by chenjing on 2021/01/23
    */
    function addZero(val) {
      val = Number(val);
      return val < 10 ? '0' + val : val;
    }

    /* 
     * queryDate: 获取当前的日期, 把其转换为想要的格式
     *  @params
     *  @return
     * by chenjing 2021/01/23
    */
    function queryDate() {
      let time = new Date();
      let year = time.getFullYear();
      let month = time.getMonth() + 1;
      let day = time.getDate();
      let week = time.getDay();
      let hours = time.getHours();
      let minutes = time.getMinutes();
      let secondes = time.getSeconds();
      
      let weekAry = ['日', '一', '二', '三', '四', '五', '六'];
      let result = year + '年' + addZero(month) + '月' + addZero(day) + '日';
      result += ' 星期' + weekAry[week] + " ";
      result += addZero(hours) + ":" + addZero(minutes) + ":" + addZero(secondes);
      clockBox.innerHTML = result;
    }
    setInterval(queryDate, 1000);
  </script>
</body>

</html>